<template>
	<view v-if="show" class="popup">
		<view style="position: relative;" class="vwh">
			<view class="box df-yc">
				<view style="position: relative;" class="inner wh100 df-yc">
					<view style="font-size: 50rpx;color: #622129;margin-top:70rpx;" class="title fb shsc">茶碗融合</view>
					<view style="color: #622129;margin-top: 38rpx;" class="little fs24">
						每{{fuseData.need_num}}个{{fuseData.src}}可合成一个{{fuseData.dest}}</view>
					<view style="margin-top: 74rpx;color: #622129;" class="items">
						<view style="margin-bottom: 60rpx;" class="item df-xb">
							<view class="src df-c">
								<view
									style="width: 72rpx;height: 57rpx;background-color: #ffc194;margin-left: 50rpx;margin-right: 24rpx;"
									class="img">
									<image :src="fuseData.src_ico" mode="widthFix"></image>
								</view>
								<view class="name shsc">{{fuseData.src}}</view>
							</view>
							<view style="margin-right: 30rpx;" class="buttons df-c">
								<view @click="changeNum(-size)" style="width: 62rpx;height: 62rpx;" class="down">
									<image style="width: 62rpx;height: 62rpx;"
										src="../../../static/imgs/images/down.png" mode="widthFix"></image>
								</view>
								<view style="margin: 0 10rpx;width: 60rpx;" class="df-c num shsc">{{num}}</view>
								<view @click="changeNum(size)" style="width: 62rpx;height: 62rpx;" class="up">
									<image style="width: 62rpx;height: 62rpx;" src="../../../static/imgs/images/up.png"
										mode="widthFix">
									</image>
								</view>
							</view>
							<view class="notice white df-c ">
								已选茶碗
							</view>
						</view>
						<view class="item df-c">
							<view class="dest df-c">
								<view style="width: 72rpx;height: 57rpx;background-color: #ffc194;margin-right: 24rpx;"
									class="img">
									<image :src="fuseData.dest_ico" mode="widthFix"></image>
								</view>
								<view class="num shsc">{{fuseData.dest}} x{{destNum}}</view>
							</view>
							<view class="notice white df-c">
								合成后将获得{{fuseData.dest}}
							</view>
						</view>
						<view  @click="fuse" style="color: #FFE3CD;margin-top: 60rpx;" class="button df-c white fs26">立即合成</view>
						<view @click="this.show=false" class="close">
							<image style="width: 46rpx;height: 46rpx;" :src="temImgUrl+'/close.png'" mode="widthFix">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: '',
		components: {},
		data: function() {
			return {
				show: false,
				temImgUrl: this.$IMG_URL_TEMP,
				fuseData: {},
				num:0,
				size:1,
				dest_name:""
			}
		},
		methods: {
			open(data) {
				this.show = true
				this.fuseData = JSON.parse(data)
				this.num=parseInt(this.fuseData.src_num/this.fuseData.need_num)*this.fuseData.need_num
				this.size=this.fuseData.need_num
				this.dest_name=this.fuseData.dest_name
			},
			close(){
				this.show = false
			},
			fuse(src,dest){
				this.$api('teaBowl.synthesisBowl',{obj_name:this.dest_name,obj_num:this.destNum}).then(res=>{
					console.log(res)
					if(res.code==1){
						this.$tools.toast("合成成功")
						this.$emit("fuseSuccess")
					}else{
						this.$tools.toast("合成失败")
					}
				})
			},
			changeNum(size){
				if(this.num+size>this.fuseData.src_num||this.num+size<this.fuseData.need_num) return
				this.num+=size
			}
		},
		computed: {
			destNum() {
				return this.num/this.size 
			}
		},
		created() {},
		mounted() {},
	}
</script>

<style scoped lang="scss">
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba($color: #000000, $alpha: 0.5);
		z-index: 9999;

		.close {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: -80rpx;
		}

		.box {
			width: 630rpx;
			height: 868rpx;
			position: absolute;
			top: 20%;
			left: 50%;
			transform: translateX(-50%);
			//background: linear-gradient(1deg, #FFDEC3, #FEEBDF);
			border-radius: 20rpx;
			background-image: url(#{$IMG_URL}/shmbg.jpg);
			background-size: cover;

			.items {
				.item {
					width: 510rpx;
					height: 149rpx;
					background: #FFD5B4;
					border: 1rpx solid #F9C49F;
					border-radius: 74rpx;
					position: relative;

					.notice {
						font-size: 20rpx;
						position: absolute;
						background: #A93A41;
						border-radius: 20rpx;
						height: 40rpx;
						top: -20rpx;
						left: 50%;
						transform: translateX(-50%);
						line-height: 40rpx;
					}
				}

				.item:first-child {
					.notice {
						width: 124rpx;
					}
				}

				.item:nth-child(2) {
					.notice {
						width: 240rpx;
					}
				}
			}

			.button {
				width: 493rpx;
				height: 100rpx;
				background: linear-gradient(270deg, #53181E, #7D333B);
				box-shadow: 0rpx 5rpx 18rpx 0rpx rgba(83, 24, 30, 0.35);
				border-radius: 50rpx;
			}
		}
	}
</style>
